.mv-container {
  padding: 10px 20px;
  display: flex;

  .mv-wrap {
    flex        : 2;
    padding     : 10px 20px;
    margin-right: 30px;

    .mv-video {
      width: 100%;

      .title {
        margin-bottom: 20px;
      }

      .video-wrap {
        width: 100%;

        video {
          width: 100%;
        }
      }

    }

    .info-wrap {
      margin-top   : 30px;
      margin-bottom: 40px;

      .singer-info {
        display      : flex;
        margin-bottom: 30px;

        .avatar-wrap {
          width        : 80px;
          height       : 80px;
          border-radius: 100%;
          overflow     : hidden;
          margin-right : 10px;

          img {
            width : 100%;
            height: 100%;
          }
        }

        .name {
          // text-align: center;
          line-height: 80px;
        }
      }

      .mv-info {
        h2 {
          font-size: 30px;
          color    : rgba(0, 0, 0, 0.85);
        }

        .date {
          color: #bebebe;
        }

        .number {
          color: #bebebe;
        }

        .desc {
          margin-top: 20px;
          font-size : 15px;
          color     : rgba(0, 0, 0, 0.65);
        }
      }
    }

    .comment {
      .comment-list {
        margin: 30px 0px;
      }
    }
  }

  .mv-recommend {
    flex: 1;

    .mv-comment {

      .title {}

      .mvs {
        .items {
          .mv-item {
            display        : flex;
            // margin-right: 0px;
            width          : 100%;
            margin         : 20px 0px !important;



            .mv-img-wrap {
              flex      : 1;
              width     : 200px;
              position  : relative;
              // z-index: 5;

              .mv-img {
                width        : 100%;
                border-radius: 5px;
                overflow     : hidden;
              }

              .icon-font {
                position  : absolute;
                left      : 50%;
                top       : 50%;
                color     : white;
                font-size : 40px;
                transform : translate3d(-50%, -50%, 0);
                // display: block;
              }

              .num-wrap {
                display  : flex;
                position : absolute;
                top      : 0px;
                right    : 5px;
                color    : white;
                font-size: 14px;

                .num-icon {
                  transform: translate3d(-5px, 3px, 0);
                  color    : white;
                }

                .num {}
              }
            }

            .mv-info-wrap {
              flex       : 1;
              display    : flex;
              align-items: center;
              margin-left: 10px;

              .mv-tow {

                .name {
                  font-size: 15px;
                  color    : rgba(0, 0, 0, 0.65);
                }

                .singer {
                  width    : 100%;
                  // height: 10px;
                  color    : #c5c5c5
                }
              }
            }
          }
        }
      }

    }

  }

}